.diagram-gate {
  position: relative;
  margin: 20px 50px 0;

  .gate-bg {
    width: 100%;
  }

  .gate-box {
    position: absolute;
    width: 66px;
    height: 85px;
    top: 121px;

    .gate {
      height: 70px;
      background-image: url(../../../../assets/images/map/monitor/gate.png);
      background-position: top;
      background-size: cover;
    }

    .gate-dangban {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
    }
  }

  .gate-wrap1 {
    .gate-box {
      top: 112px;

      &:nth-of-type(1) {
        left: 348px;
      }
    }
  }

  .gate-wrap2 {
    .gate-box {
      &:nth-of-type(1) {
        left: 263px;
      }

      &:nth-of-type(2) {
        left: 430px;
      }
    }
  }

  .gate-wrap3 {
    .gate-box {
      &:nth-of-type(1) {
        left: 182px;
      }

      &:nth-of-type(2) {
        left: 347px;
      }

      &:nth-of-type(3) {
        left: 512px;
      }
    }
  }

  .water-box {
    position: absolute;
    left: 0;
    bottom: 4px;

    &.water-box1 {
      bottom: 19px;
    }
    img {
      width: 100%;
    }

    .water {
      background-color: #54aef6;
      opacity: 0.4;
      margin: 0 auto;
      height: 30px;
    }

    .water1 {
      width: 432px;
    }

    .water2 {
      width: 598px;
    }

    .water3 {
      width: 100%;
    }
  }

}

.status {
  padding: 20px 30px;

  .s-title {
    font-size: 12px;
    line-height: 36px;
    font-weight: bold;
    font-family: Microsoft YaHei;
    color: #555555;
  }

  ul {
    li {
      font-size: 12px;
      line-height: 24px;

      &:before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background: rgba(47, 149, 254, 1);
        border-radius: 50%;
        margin-right: 10px;
      }

      span:nth-child(2) {
        color: #2f96fe;
      }
    }
  }
}
